<template>
  <div>
    <el-container>
      <!-- 顶部状态栏 -->
      <div class="orientation">
        <i class="el-icon-location-outline">中国大陆</i
        ><a href="" class="loginButton">亲,请登录</a>
        <a href="" style="color: red" class="topButton">免费注册</a
        ><a href="" class="topButton">我的订单</a>
        <el-dropdown class="topButton">
          <div class="el-dropdown-link" style="color: black">
            我的<i class="el-icon-arrow-down el-icon--right"></i>
          </div>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item>我的关注</el-dropdown-item>
            <el-dropdown-item>我的足迹</el-dropdown-item>
            <el-dropdown-item>我的购物车</el-dropdown-item>
            <el-dropdown-item>我的优惠券</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
      <!-- 商城logo和搜索及购物车 -->
      <div class="top">
        <!-- Logo -->
        <a href="/" class="logo">
          <img src="../../assets/logo.png" alt="" />
        </a>
        <!-- 搜索框 -->
        <div class="search">
          <el-input
            placeholder="请输入内容"
            v-model="input"
            type="text"
            clearable
          >
            <el-button
              id="frame"
              slot="append"
              icon="el-icon-search"
              @click="search"
            ></el-button>
          </el-input>
          <el-badge class="shopping_cart">
            <el-button
              type="mini"
              style="
                color: #e1251b;
                font-size: 15px;
                background: rgba(255, 0, 0, 0);
              "
              icon="el-icon-shopping-cart-full"
              class="btn"
              @click="goshoppingcart"
              >我的购物车</el-button
            >
          </el-badge>
        </div>
      </div>
      <!-- 广告链接 -->
      <img src="../../assets/guangao.png" alt="" />
      <!-- 面包屑 -->
      <el-header style="height: 30px; width: 100%">
        <a href="/" class="Navigationindentation" style="margin-left: 10%"
          >首页</a
        >
        <label class="Navigationindentation">></label>
        <a href="" class="">个人信息</a>
        <label class="Navigationindentation">></label>
        <a href="" class="">我的关注</a>
        <el-button type="text" @click="deleteall" style="margin-left: 55%"
          >移除所有关注</el-button
        >
      </el-header>
      <!-- 内容主体结构 -->
      <el-card class="contentbody">
        <!-- 标题头 -->
        <div>
          <label style="margin-left: 10%">店铺封面</label>
          <label style="margin-left: 30%">标题</label>
          <label style="margin-left: 35%">单价</label>
          <label style="margin-left: 6%">操作</label>
        </div>
        <!-- 我的关注 -->
        <el-card v-for="n in Ordercontent" :key="n.id" class="attention">
          <div class="imgbody">
            <img :src="n.img" alt="" class="imgs" />
          </div>
          <div class="titleandproductname">
            <b class="titlesize">{{ n.title }}</b>
            <br />
            <br />
            <br />
            <label class="productnamesize">{{ n.productname }}</label>
          </div>
          <div class="price">
            <br />
            <br />
            <br />
            <br />
            <label style="">￥{{ n.price }}</label>
          </div>
          <div class="deletebutton">
            <el-button type="text" @click="deletethis" class="deletebuttons"
              >移除关注</el-button
            >
          </div>
        </el-card>
        <div class="tipslabel">
          <b>没有更多了哦</b>
        </div>
      </el-card>
    </el-container>
  </div>
</template>

<style scoped>
/* 顶部状态栏整体 */
.orientation {
  background-color: #e9eef3;
  width: 100%;
  padding-left: 10%;
}

/* 顶部我的下来菜单按钮 */
.el-dropdown-link {
  cursor: pointer;
  color: #409eff;
}
/* a链接去下划线并将字体颜色变黑 */
a {
  text-decoration: none;
  color: black;
}
/* 将鼠标放到a链接变色 */
a:hover {
  text-decoration: none;
  color: red;
}
/* 登录按钮 */
.loginButton {
  margin-left: 40%;
}
/* 顶部除登录外的三个按钮 */
.topButton {
  margin-left: 4%;
}

/* 搜索部分整体 */
.search {
  margin-left: 35%;
  margin-top: 2%;
}
/* 搜索按钮 */
.el-icon-search {
  height: 40px;
  width: 70px;
  background-color: red;
}
/* 鼠标移到搜索按钮变色 */
.el-icon-search:hover {
  background-color: rgb(219, 29, 29);
}
/* 购物车按钮 */
.shoppingcar {
  height: 40px;
  width: 130px;
  margin-left: 13%;
  color: red;
  border: none;
  background-color: white;
}
/* 将鼠标移到购物车按钮边框变色 */
.shoppingcar:hover {
  border-style: solid;
  color: red;
  border-width: 1px;
}
/* 购物车图标大小 */
.el-icon-shopping-cart-full {
  margin-right: 10px;
}
/* 面包屑整体大小 */
.el-header {
  background-color: #ebedf0d7;
}
/* 面包屑内容间隔 */
.Navigationindentation {
  margin-left: 1%;
  margin-right: 1%;
}
/* 内容主体结构 */
.contentbody {
  /* background-color: rgba(221, 211, 211, 0.801); */
  width: 80%;
  margin-left: 10%;
  height: 2000px;
}
/* 我的关注整体 */
.attention {
  width: 100%;
  margin-top: 10px;
}
/* 图片布局 */
.imgbody {
  width: 20%;
  height: 200px;
  float: left;
}
/* 图片等比例缩放 */
.imgs {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  margin-left: 6%;
}
/* 标题和关键字整体布局 */
.titleandproductname {
  width: 61%;
  height: 200px;
  float: left;
}
/* 标题大小 */
.titlesize {
  font-size: 25px;
}
/* 关键字大小 */
.productnamesize {
  font-size: 15px;
}
/* 价格整体布局 */
.price {
  width: 5%;
  height: 200px;
  float: left;
}
/* 删除单条记录按钮整体布局 */
.deletebutton {
  width: 6%;
  height: 200px;
  float: left;
  margin-left: 3%;
}
/* 删除单条记录按钮 */
.deletebuttons {
  margin-top: 90%;
  margin-left: 50%;
}
/* 最底部提示文本 */
.tipslabel {
  margin-left: 45%;
  margin-top: 30px;
}

/* 头部 */
.top {
  height: 98px;
  margin-top: 15px;
}

/* Logo */
.logo {
  width: 190px;
  height: 80px;
  float: left;
  margin: 8px 0 0 160px;
}


/* 搜索框 */
.search {
  margin-left: 430px;
  line-height: 80px;
  margin-top: -1px;
  width: 600px;
}

/* 搜索按钮 */
#frame {
  background-color: #ff5000;
  font-size: 15px;
  border-radius: 1;
  color: #f5f5f5;
}

/* 购物车 */
.shopping_cart {
  margin-top: -160px;
  margin-left: 630px;
}

/* 关键字布局 */
</style>

<script>
export default {
  data () {
    return {
      input: "",
      // Ordercontent: [],
      Ordercontent: [
        {
          id: 1,
          title:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          productname:
            " 【品质好物】小金刚品质液冷游戏芯，骁龙750G，120Hz高刷屏【note95G火热抢购中】",
          img: require("../../assets/imgs/1.jpg"),
          price: 99,
        },
        {
          id: 2,
          title:
            " Redmi Note 9 Pro 5G 一亿像素 骁龙750G 33W快充 120Hz刷新率 湖光秋色 8GB+256GB 游戏智能手机 小米 红米",
          productname:
            " 【品质好物】小金刚品质液冷游戏芯，骁龙750G，120Hz高刷屏【note95G火热抢购中】",
          img: require("../../assets/imgs/1.jpg"),
          price: 99,
        },
      ],
    };
  },
  methods: {
    search() {
      this.$router.push("/search");
    },
    goshoppingcart() {
      this.$router.push("/shoppingcart");
    },
    deleteall () {
      this.$confirm("是否将所有关注关注移出?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "移除成功!",
            },
            location.reload()
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消移除",
          });
        });
    },
    deletethis () {
      this.$confirm("是否将该商品移出关注?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.$message(
            {
              type: "success",
              message: "移除成功!",
            },
            location.reload()
          );
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消移除",
          });
        });
    },
  },
};
</script>